<template>
  <div class="recommend">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in newBannerData" :key="index">
        <img :src="item.image_url" />
      </van-swipe-item>
    </van-swipe>
    <Recommendcp @changeTheNovel="changeTheNovel(12)" :recommendFictionData="recommendFictionData"></Recommendcp>
  </div>
</template>

<script>
import { getRecommendFiction, getNewBanner } from "@/api/api";
import Recommendcp from "@/components/Recommendcp.vue"
export default {
  name: "Recommend",
  data() {
    return {
      recommendFictionData: [],
      newBannerData: [],
    };
  },
  components: {
    Recommendcp
  },
  created() {
    getNewBanner()
      .then(res => {
        if (res.data.code === 0) {
          this.newBannerData = res.data.data.banner;
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    //换一换
    changeTheNovel(num) {
      getRecommendFiction(Math.floor(Math.random() * 31), num)
        .then(res => {
          if (res.data.code === 0) {
            this.recommendFictionData = res.data.data.feeds;
            console.log(res.data.data.feeds)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
  }
};
</script>

<style lang="scss" scoped>
.recommend {
  padding-bottom: 50px;

  .my-swipe {
    margin: 10px auto;
    height: 266.8px;
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background: rgba(76, 141, 158, 0.8);

    img {
      width: 200px;
    }
  }
}
</style>